<script setup lang="ts">
import {ref} from 'vue';
import {Search, Refresh} from '@element-plus/icons-vue';
import {ApplyInter, passRefReview, reviewIf} from "@/api/interface/interFace";
import {ElMessageBox} from "element-plus";
import {getReviewInfo, searchReInfo, setReviewStats} from "@/api/system/review";
import {useRouter} from "vue-router";
const router = useRouter();
const statsSelect = ref('');
const options = [
    {
        value: '0',
        label: '审核中',
    },
    {
        value: '1',
        label: '通过',
    },
    {
        value: '2',
        label: '驳回',
    },
];
const dataPick = ref('');
const businessName = ref('');
const passReview = ref<passRefReview>({
    releaseId: 0,
    auditState: '1'
});
const refRefs = ref<passRefReview>({
    releaseId: 0,
    auditState: "2",
    rejectionReason: ''
});
let businessInfo = ref<object[]>([]);
let appInfototal = ref(0);
let dialogVisible = ref(false);
let refReason = ref('');
let isDisabled = ref();
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};
let searchs = ref<reviewIf>({
    title: '',
    auditState: '',
    startTime: '',
    endTime: '',
});

function reset(): void {
    dataPick.value = '';
    businessName.value = '';
    businessInfo.value.length = 0;
    statsSelect.value = '';
    searchs.value.title = businessName.value;
    searchs.value.auditState = statsSelect.value;
    searchs.value.startTime = dataPick.value[0];
    searchs.value.endTime = dataPick.value[1];
    searchReInfo(searchs.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            isDisabled.value = Number(item.auditState);
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        businessInfo.value?.push((res as any).rows);

    });
}

let params = ref<ApplyInter>({
    requestUsername: '',
    startTime: '',
    endTime: '',
    pageNum: 1,
    pageSize: 10,
});


const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    params.value.pageNum = val;
    businessInfo.value.length = 0;
    getReviewInfo(params.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            isDisabled.value = Number(item.auditState);
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        businessInfo.value?.push((res as any).rows);
    });
};
getReviewInfo(params.value).then(res => {
    console.log(res);
    (res as any).rows.forEach((item) => {
        isDisabled.value = Number(item.auditState);
        switch (Number(item.auditState)) {
            case 0:
                item.auditText = '审核中';
                break;
            case 1:
                item.auditText = '通过';
                break;
            case 2:
                item.auditText = '驳回';
                break;
            default:
                item.auditText = '待审核';
        }

    });
    businessInfo.value?.push((res as any).rows);
    appInfototal.value = (res as any).total;

});

function searchApplyInfo() {
    businessInfo.value.length = 0;
    searchs.value.title = businessName.value;
    searchs.value.auditState = statsSelect.value;
    searchs.value.startTime = dataPick.value[0];
    searchs.value.endTime = dataPick.value[1];

    searchReInfo(searchs.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            isDisabled.value = Number(item.auditState);
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        businessInfo.value?.push((res as any).rows);

    });
}


function passApply(appId) {
    passReview.value.releaseId = appId;
    setReviewStats(passReview.value).then(res => {
        console.log(res);
    });
    businessInfo.value.length = 0;
    getReviewInfo(params.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            isDisabled.value = Number(item.auditState);
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        businessInfo.value?.push((res as any).rows);
    });

}

function refApply(appId) {
    dialogVisible.value = true;
    refRefs.value.releaseId = appId;


}

function sureRef() {
    dialogVisible.value = false;
    refRefs.value.rejectionReason = refReason.value;
    setReviewStats(refRefs.value).then(res => {
        console.log(res);
    });
    businessInfo.value.length = 0;
    getReviewInfo(params.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            isDisabled.value = Number(item.auditState);
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        businessInfo.value?.push((res as any).rows);
    });
    refReason.value = '';
}

function jumpDetail(id) {
    router.push({path: '/System/PostDetail', query: {releaseId: id}});
}


</script>
<template>
    <div>
        <div class="title" style="position: relative">
            <span class="inputTitle">业务名称</span>
            <el-input
                v-model="businessName"
                class="businessName"
                placeholder="请输入业务名称"
                clearable
            />
            <span class="inputTitle">审核状态</span>
            <el-select
                v-model="statsSelect"
                clearable
                placeholder="全部"
                style="width: 260px;margin-left: 15px"
            >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <span class="inputTitle" style="margin-left: 50px">创建时间</span>
            <el-date-picker
                v-model="dataPick"
                type="daterange"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                class="dataInput"
                style="width: 300px"
                :default-value="[new Date(2024, 3, 24), new Date(2024, 3, 24)]"
            />
            <span class="btns">
            <el-button type="primary" :icon="Search" class="serachBtn" @click="searchApplyInfo">查询</el-button>
            <el-button :icon="Refresh" class="refreshBtn" @click="reset">重置</el-button>
        </span>
        </div>
        <section class='tableBox' style="padding: 0 30px">
            <el-table :data="(businessInfo[0] as any)" style="width: 100%;margin-top: 50px" stripe>
                <template #empty>
                    <el-empty description="暂无数据"/>
                </template>
                <el-table-column prop="title" label="业务名称" width="180" height/>
                <el-table-column prop="intro" label="业务说明" width="180" height/>
                <el-table-column prop="invitee" label="发布人" height/>
                <el-table-column prop="updatedTime" label="提交时间" height/>
                <el-table-column prop="auditText" label="状态" height/>
                <el-table-column prop="操作" label="操作" height>
                    <template #default=appIndex>
                        <button
                            :class="Number(appIndex.row.auditState)? 'btnClass':'' " style="color: #1c84c6"
                            :disabled=Number(appIndex.row.auditState) @click="passApply(appIndex.row.releaseId)">通过
                        </button>
                        <button
                            :class="Number(appIndex.row.auditState)? 'btnClass':'' " style="margin-left: 10px;color: #1c84c6"
                            :disabled=Number(appIndex.row.auditState) @click="refApply(appIndex.row.releaseId)">驳回
                        </button>
                        <button style="color: #1c84c6;margin-left: 10px" @click="jumpDetail(appIndex.row.releaseId)">详情</button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <div style="position: relative">
            <span style="margin-left: 1000px;position: absolute;top: 8px">共{{appInfototal}}条数据</span>
            <el-pagination
                style="margin-top: 20px;margin-left: 1150px"
                :page-size="params.pageSize"
                layout="prev, pager, next"
                :total="appInfototal"
                @currentChange="handleCurrentChange"
            />
        </div>

        <el-dialog
            v-model="dialogVisible"
            title="请输入驳回理由"
            width="500"
            :before-close="handleClose"
            style="padding: 20px"
        >
            <textarea v-model='refReason' style="width: 100%;height: 100px; border: 1px solid grey;resize: none;outline: 0"></textarea>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureRef">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style>
.btnClass {
    color: rgb(204, 196, 207) !important;
    cursor: no-drop;
}

.el-table .el-table__cell {
    padding: 18px !important;
}

.dialog {
    padding: 30px;
}

.cell {
    text-align: center !important;
    font-size: 14px;
}

.common-layout {
    margin-top: 40px;
    padding: 0 20px;
}

.el-header {
    background-color: rgb(248, 248, 249);
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    padding: 0 70px;
    line-height: 44px;
    border-bottom: 1px solid #d9d9d9;
}

.ulTitle {
    display: flex;
    justify-content: space-between;
}

.el-main {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    padding: 0 70px;
    border-bottom: 1px solid #d9d9d9;
    height: 335px;
}

.el-footer {
    background-color: green;
}

li {
    list-style: none;
    float: left;
}

.btns {
    margin-left: 80px;
    position: absolute;
    bottom: -10px;
}

.serachBtn, .refreshBtn {
    width: 73px !important;
    height: 28px !important;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.title {
    height: 65px;
    border-bottom: 1px solid rgb(237, 237, 237);
    line-height: 65px;
    padding: 0 45px;
    overflow: hidden;
}

.inputTitle {
    font-size: 14px;
    font-weight: bolder;
    color: #666;

}

.businessName {
    width: 15%;
    margin-left: 15px;
    margin-right: 15px;
    height: 28px;
    font-size: 12px;
}

.el-date-editor .el-range-input {
    font-size: 12px;
}

.el-select-dropdown__item {
    width: 100% !important;
}

.cell {
    height: 30px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
</style>
